<html> 
    <head> 
        <title></title> 
        <link rel="stylesheet" type="text/css" href="css/present.css" /> 
<script type="text/javascript">
$(function() {
   $(".hide").hide();
   $("pre.code").text($("div#div_1").html());
   sub = { index:0, steps: [], step: function() {sub.steps[sub.index++]();}};
   sub.next= function () { return sub.index >= sub.steps.length };
   sub.steps.push(function() {removeBullets("step0");$(".step1").show();$("pre.code").text($("div#div_1").html());});
   sub.steps.push(function() {$(".step2").show();});
   sub.steps.push(function() {$(".step3").show();});
   sub.steps.push(function() {$("pre.code").text($("div#div_1").html().replace(/(?!^) l /g, ' ').replace("10 10", "10 10 l"));});
   sub.steps.push(function() {$(".step3").hide();$(".header").text("Something more complex: jeroen");});
   sub.steps.push(function() {$("div#div_1").hide();$("pre.code").text($("div#div_2").html());$('pre.code').animate({width: "510"}, 1500, function() {$("div#div_2").show();})});
   sub.steps.push(function() {$(".step4").show() });
   sub.steps.push(function() {$(".twee").css({fill: 'none'})});

});

swapNodes = function(a, b) {
    var aparent= a.parentNode;
    var asibling= a.nextSibling===b? a : a.nextSibling;
    b.parentNode.insertBefore(a, b);
    aparent.insertBefore(b, asibling);
    $("pre.code").text($("div#div_2").html());
}
</script>

    </head> 
<body class="jsxgraph_body">
<ul class="">
  <li class="step0">SVG offers more than circles and rectangles</li>
  <li class="step0">Paths which allow you to define pen drawings movements via
    <ul>
      <li>line (l, L)</li>
      <li>move (m, M)</li>
      <li>bezier curves (c, C, q, Q, s)</li>
      <li>arcs (a,A)</li>
      <li>All movements are in the cartesian coordinate coordinate system.</li>
      <li>Upper case denotes an absolute movement, lower cases denote a relative movement.</li>
    </ul>
  </li>
  <li class="step1 hide"><span class="header">To display a rectangle (again):</span>
<table><tr><td width="50%">
<pre class="code">
</pre>
</td>
<td width="50%">
<div id="div_1" class="step2 hide"> 
<svg id="figs" xmlns="http://www.w3.org/2000/svg" version="1.1"  baseProfile="full" viewbox="0 0 50 60">
    <style type="text/css"><![CDATA[
      .figz {
        fill: blue;
        stroke: green;
        stroke-width: 3;
      }
    ]]></style>
<path class="figz" d="M 10 10 l 30 0 l 0 40 l -30 0 l 0 -40">
</svg>
</div>
<div id="div_2" class="hide"> 
<svg id="figs" xmlns="http://www.w3.org/2000/svg" version="1.1"  baseProfile="full" viewbox="0 0 350 160">
<path class="figz twee" d="M 30 80 c 10 -30 20 -45 15 -37 m -2 -20 l 5 5 m -3 15 c 0 20 10 90 -10 90 -22 0 10 -50 20 -60 10 -10 30 12.7 30 -23 0 -5.25 -10 -35 -20 20 -6 33 0 35 20 20 20 -15 12 -11 18 -45 2.4 -14 -20 12 35 -5 -22 6.8 -22 60 -13 60 9 0 30 -97 40 -40 -40 -75 -20 110 2 10 6.6 -30 -4 -7 0 0 4 7 30 16 30 -20 0 -5.25 -10 -35 -20 20 -6 33 0 35 20 20 20 -15 12 -31 15 -50 -0.6 4 -5 50 -5 60 0 -40 0 -60 20 -60 14 0 3 60 5 60 0.4 0 0 0 5 -5">
</svg>
</div>
</td>
</tr></table>
<li class="hide step3">Note the removal of all but the first l subsequent l's</li>
<li class="hide step4">Set fill attribute to none $(".twee").css({fill: 'none'})</li>
</ul>
</body> 
</html> 
